<script>
import { ref } from "vue";

export default {
  name: "App",
  // 选项式实现数据与函数

  // data() {
  //   return {
  //     msg: "hello",
  //     count: 1,
  //   };
  // },
  // methods: {
  //   onClick() {
  //     this.count++;
  //   },
  // },

  // 生命周期的钩子，运行在 beforeCreate 之前
  // setup() {
  //   // setup 选项，在此写 组合式API
  //   let msg = "hello";
  //   let count = 1;

  //   function onClick() {
  //     // 修改 count 不需要this
  //     console.log(count);
  //     count = count + 1;
  //     console.log(count);

  //     // 数据修改了，但是页面没有更新，原因是，这里的 count 数据不是响应式数据。
  //   }

  //   // 需要 retrun ,返回出去的 数据和方法 才能给到 模板使用
  //   return {
  //     msg,
  //     count,
  //     onClick,
  //   };
  // },

  setup() {
    let msg = "hello";
    // 想要让 count 是响应式数据，那么需要使用 响应式API  ref
    // 这里的 ref 不同与之前的 ref 标记
    let count = ref(1); // count会成为一个对象，对象中的 value 值才是数据，后续操作也是操作 value 值
    console.log(count);

    function onClick() {
      // count.value++;
      count.value = count.value + 1;
    }

    return {
      msg,
      count,
      onClick,
    };
  },
};
</script>

<template>
  <div>
    <h1>App</h1>
    <!-- ref 响应式数据 count 在这个 模板中使用时，不需要 .value。vue内部会帮我们自动 .value -->
    <p>{{ msg }} - {{ count.value }}</p>
    <button @click="onClick">count++</button>
  </div>
</template>
